<template>
    <div>
        <!-- roadManage! -->
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <el-row class="head-fun">
                        <el-col :span="24">
                            <div class="lf choose-title">行政区域</div>
                            <el-input v-model="zhanName" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">站内编码</div>
                            <el-input v-model="chargeMan" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">线路名称</div>
                            <!-- <el-input v-model="phone" size="mini" style="width:150px" class="choose-input lf"></el-input> -->
                            <el-autocomplete
                              class="inline-input choose-input lf"
                              v-model="phone"
                              :fetch-suggestions="querySearch"
                              placeholder="请输入内容"
                              @select="handleSelect" size="mini" style="width:150px" >
                            </el-autocomplete>
                            <button class="check-btn rf custom-btn" @click="getRoadList"><img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询</button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="modWin=true;modTitle='添加'">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="modWin=true;modTitle='修改'">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="del">删除</div>
                            <img src="../../assets/imgs/operation_icon_shuju_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="tongbu">同步数据中心</div>
                        </el-col>
                    </el-row>
                    <!-- 表格数据 -->
                    <el-row>
                        <el-col :span="24">
                            <avue-crud :data="roadList[0].data" :option="roadList[0].option" @current-row-change="rowChange" class="road-table" @current-change="roadPage" :page="roadList[0].page"></avue-crud>
                        </el-col>
                    </el-row>
                    <!-- 表格数据2 -->
                    <el-row class="tablel2-container">
                        <el-col :span="24">
                            <div class="road-text lf active-choose" @click="toStation" id="station">线路途经站点</div>
                            <div class="lf tmp">|</div>
                            <div class="road-text lf" @click="toStationDown" id="stationDown">途经站下车点</div>
                        </el-col>
                    </el-row>
                    <el-row v-show="staListShow">
                        <el-col :span="24">
                          <avue-crud :data="stationList[0].data" :option="stationList[0].option" @current-row-change="staCurrentRow"></avue-crud>
                            <!-- <el-table
                            :data="stationList"
                            stripe
                            style="width: 100%" class="ban-table">
                                <el-table-column
                                prop="st_name"
                                label="名称"
                                width="150">
                                </el-table-column>
                                <el-table-column
                                prop="province"
                                label="辖区省"
                                width="100">
                                </el-table-column>
                                <el-table-column
                                prop="city"
                                label="辖区市"
                                width="150">
                                </el-table-column>
                                <el-table-column
                                prop="county"
                                label="辖区县"
                                width="150">
                                </el-table-column>
                                <el-table-column
                                prop="town"
                                label="辖区镇"
                                >
                                </el-table-column>
                            </el-table> -->
                        </el-col>
                    </el-row>
                    <el-row v-show="addStation">
                        <el-col :span="24" class="addStationContainer">
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf staImg"><div class="lf choose-title fun-text" @click="toAddStation">添加</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf staImg"><div class="lf choose-title fun-text" @click="delDown">删除</div>
                            <avue-crud ref="crud" :data="downBusList.data" :option="downBusList.option" @current-row-change="busRowChange" ></avue-crud>
                        </el-col>
                    </el-row>
                    <!-- 弹窗 -->
                    <div class="modal-win" v-show="modWin">
                      <div class="closeWin" @click="modWin=false">X</div>
                      <!-- 标题栏 -->
                      <el-row class="add-title">
                          <el-col :span="24">
                              <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{modTitle}}</span>
                          </el-col>
                      </el-row>
                      <!-- 信息栏 -->
                      <el-row>
                        <el-col :span="8" class="msg-container">
                          <avue-form ref="form" v-model="roadForm.data" :option="roadForm.option" class="yz-form"></avue-form>
                        </el-col>
                        <el-col :span="16" class="road-right">
                          <el-tabs v-model="tabActive" type="border-card" class="road-tab">
                            <el-tab-pane label="到达站点" name="arrive">
                              <div class="choose-title lf">到站</div><el-input v-model="arriveStation" class="lf arrive-input" ></el-input>
                            </el-tab-pane>
                            <el-tab-pane label="配客点" name="peike">
                              <div class="choose-title lf">配客站</div><el-input v-model="peikeStation" class="lf arrive-input" ></el-input>
                            </el-tab-pane>
                            <button class="check-btn road-btn" @click="addToSta">
                            <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">添加到站点</button>
                          </el-tabs>
                          <!-- 表格信息栏 -->
                          <!-- <div></div> -->
                        </el-col>
                      </el-row>
                      <!-- 按钮 -->
                      <button class="check-btn rf" @click="modWin=false">
                      <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                      <button class="check-btn rf" @click="doSure"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 添加弹窗 -->
        <div class="daoqi-win" v-show="addWin">
            <div class="tongbu-text">添加</div><div class="closeWin" @click="addWin=false">X</div>
            <div>请选择{{staRow.st_name}}的下车点</div>
             <el-checkbox-group v-model="daoZhanCheckList">
              <el-checkbox  v-for="item of roadDList" :label="item.name" class="check-item"></el-checkbox><br>
            </el-checkbox-group>
            <button class="check-btn rf" @click="addWin=false">
            <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
            <button class="check-btn rf custom-btn" @click="addSure"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
        </div>
    </div>
</template>

<script>
import "../../assets/js/jquery.js";
import qs from "qs";
import TableData from "../../components/common/tableData"
const DIC={
  lineType:[],
  luoType:[
    {
      label:"",
      value:true
    }
  ]
}
export default {
  data: function() {
    return {
      activeTag:"5-2",
      zhanName: "",
      chargeMan: "",
      phone: "",
      roadList: [
        {
          page:{
            pageSizes: [4],
            total: 2,
            currentPage: 1,
            pageSize: 4
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      roadDList:[],
      addWin:false,
      staRow:"",
      daoZhanCheckList:[],
      stationList: [
        {
          page: {
            pageSizes: [10],
            total: 20,
            currentPage: 1,
            pageSize: 10,
        },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: false,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: [
              {
                label:"名称",
                prop:"st_name"
              },
              {
                label:"辖区省",
                prop:"province"
              },
              {
                label:"辖区市",
                prop:"city"
              },
              {
                label:"辖区县",
                prop:"county"
              },
              {
                label:"辖区镇",
                prop:"town"
              },
            ]
          }
        }
      ],
      staListShow: true,
      addStation: false,
      currentRow:"",
      tag:"",
      modWin:false,
      modTitle:"test",
      roadForm:{
        data:{},
        option:{
          dicData:DIC,
          column:[
            {
              label:"线路编码",
              prop:"lineNum",
              span:18
            },
            {
              label:"财务编码",
              prop:"finNum",
              span:18
            },
            {
              label:"对内名称",
              prop:"inName",
              span:24
            },
            {
              label:"对外名称",
              prop:"outName",
              span:24
            },
            {
              label:"线路类型",
              prop:"lineType",
              type:"select",
              dicData:"lineType",
              span:18
            },
            {
              label:"行政区域",
              prop:"xzPlace",
              span:24
            },
            {
              label:"误班时限",
              prop:"lateTime",
              span:18
            },
            {
              label:"失班时限",
              prop:"lostTime",
              span:18
            },
            {
              label:"落水班",
              prop:"luoClass",
              type:"checkbox",
              dicData:"luoType",
              span:18
            },
            {
              label:"线路备注",
              prop:"remark",
              type:"textarea",
              span:24
            },
          ]
        }
      },
      tabActive:"arrive",
      arriveStation:"",
      peikeStation:"",
      roadNameList:[],
      downCurrentRow:"",
      downBusList:{
        data:[],
        option:{
          highlightCurrentRow:true,
          page:false,
          menu:false,
          column:[
            {
              label:"名称",
              prop:"name"
            },
            {
              label:"备注",
              prop:"remarks"
            },
          ]
        }
      }
    };
  },
  methods: {
    addSure(){
      this.getRequest("8/sch/data/line/viastDropoff/add?line_station_id="+this.staRow.station_id+"&station_id="+this.staRow.id+"&all=&stDropoffId=").then(data=>{
        this.msgShow(data,function(){this.addWin=false})
      })
    },
    staCurrentRow(val){
      this.staRow=val;
      console.log(val);
    },
    getStationList(){
      this.postRequest("/sch/data/line/viast/list",{
        line_id:this.currentRow.id
      }).then(data=>{
        this.stationList[0].data=data.data.list;
      })
    },
    delDown(){
      this.postRequest("/sch/data/line/viastDropoff/list",{
        id:this.downCurrentRow.id
      }).then(data=>{
          this.msgShow(data,function(){})
      })
    },
    getDownList(){
      this.postRequest("/sch/data/line/viastDropoff/list").then(data=>{ 
          this.downBusList.data=data.data.list;
      })
    },
    busRowChange(val){
      this.downCurrentRow=val
    },
    getROadNamelist(){
      this.postRequest("/sch/data/line/listWithSpell").then(data=>{
        for(var item of data.data){
          this.roadNameList.push({
            value:item.name,
            id:item.id
          });
        }
      });
    },
    querySearch(queryString, cb) {
        var restaurants = this.roadNameList;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
    roadPage(val){
      this.roadList[0].page.currentPage=val;
      if(this.tag=="tongbu"){
        this.tongbu();
      }else{
        this.getRoadList();
      }
    },
    getRoadList() {
      this
        .postRequest("/sch/data/line/list",{
          filterRules:JSON.stringify([
            {"field":"base_line.region_id","op":"eq","value":this.zhanName},{"field":"base_line.code","op":"eq","value":this.chargeMan},{"field":"base_line.name_in","op":"cn","value":this.phone}
          ]),
          rows:4,
          page:this.roadList[0].page.currentPage
        })
        .then(data => {
          this.roadList[0].page.total=data.data.totalRow;
          this.roadList[0].data=data.data.list;
        });
    },
    refresh() {
      this.tag="";
      this.getRoadList();
    },
    toStation() {
      this.staListShow = true;
      this.addStation = false;
      $("#station")
        .addClass("active-choose")
        .siblings()
        .removeClass("active-choose");
    },
    toStationDown() {
      this.staListShow = false;
      this.addStation = true;
      $("#stationDown")
        .addClass("active-choose")
        .siblings()
        .removeClass("active-choose");
    },
    toAddStation() {
      this.addWin=true;
      this.postRequest("/sch/data/station/dropoff/list",{
        filterRules:JSON.stringify([
          {"field":"station_id","op":"eq","value":this.staRow.id}
        ])
      }).then(data=>{
        console.log(data);
        this.roadDList=data.data.list;
        console.log(this.roadDList)
      })
    },
    tableCreate() {
      this.roadList[0].option.column.push(
        {
          label: "统一编码",
          prop: "offical_code"
        },
        {
          label: "站内编码",
          prop: "code"
        },
        {
          label: "对内名称",
          prop: "official_name"
        },
        {
          label: "对外名称",
          prop: "name_out"
        },
        {
          label: "辖区类型",
          prop: "type"
        },
        {
          label: "数据更新时间",
          prop: "update_time"
        },
        {
          label: "数据状态",
          prop: "state"
        },
      );
    },
    del(){
      this.postRequest("/sch/data/line/del",{
        id:this.currentRow.id
      }).then(data=>{
        console.log(data);
        if(data.data[0]==0){
          this.$message({
          message: data.data[1],
          type: 'success'
          });
          // this.refresh();
        }else{
           this.$message.error(data.data[1]);
        }
      })
    },
    tongbu(){
      this.tag="tongbu";
      this.postRequest("/sync/center/data/base/line",{
        rows:4,
        page:this.roadList[0].page.currentPage
      })
        .then(data => {
          this.roadList[0].page.total=data.data.totalRow;
          this.roadList[0].data=data.data.list;
        });
    },
    doSure(){
      if(this.modTitle=="添加"){
        this.getRequest("/sch/data/line/add?line.code="+this.roadForm.lineNum+"&line.id=&lineStation.id=&station_name=&station_name=&type=1&station_id=&is_start_station=&is_peike_station=&is_end_station=&is_start_station_cb=&kilo=&runtime=&type=1&station_id=&is_start_station=&is_peike_station=&is_end_station=&is_peike_station_cb=&kilo=&runtime=&type=&station_id=&is_start_station=&is_peike_station=&is_end_station=&is_end_station_cb=&kilo=&runtime=&line.finance_code=&line.name_in="+this.roadForm.inName+"&line.name_out="+this.roadForm.outName+"&line.type="+this.roadForm.lineType+"&line.region_id="+this.this.roadForm.xzPlace+"&line.late_time="+this.roadForm.lateTime+"&line.lost_time="+this.roadForm.lostTime+"&line.is_stream_line="+this.roadForm.luoClass+"&line.stream_line_mode=&line.stream_line_start_time=&line.stream_line_end_time=&line.stream_line_bus_interval=&line.remarks="+this.roadForm.remark).then(data=>{
          if(data.data[0]==0){
            this.$message({
              message: data.data[1],
              type: 'success'
            });
          }else{
            this.$message.error('添加失败!请检查!');
            this.$message.error(data.data[1]);
          }
        })
      }else if(this.modTitle=="修改"){
        this.getRequest("/sch/data/line/update?line.code="+this.roadForm.lineNum+"&line.id=&lineStation.id=&station_name=&station_name=&type=1&station_id=&is_start_station=&is_peike_station=&is_end_station=&is_start_station_cb=&kilo=&runtime=&type=1&station_id=&is_start_station=&is_peike_station=&is_end_station=&is_peike_station_cb=&kilo=&runtime=&type=&station_id=&is_start_station=&is_peike_station=&is_end_station=&is_end_station_cb=&kilo=&runtime=&line.finance_code=&line.name_in="+this.roadForm.inName+"&line.name_out="+this.roadForm.outName+"&line.type="+this.roadForm.lineType+"&line.region_id="+this.this.roadForm.xzPlace+"&line.late_time="+this.roadForm.lateTime+"&line.lost_time="+this.roadForm.lostTime+"&line.is_stream_line="+this.roadForm.luoClass+"&line.stream_line_mode=&line.stream_line_start_time=&line.stream_line_end_time=&line.stream_line_bus_interval=&line.remarks="+this.roadForm.remark).then(data=>{
          if(data.data[0]==0){
            this.$message({
              message: data.data[1],
              type: 'success'
            });
          }else{
            this.$message.error('修改失败!请检查!');
            this.$message.error(data.data[1]);
          }
        })
      }
    },
    addToSta(){},
    getLineType(){
      this.postRequest("/sch/data/common/linetype").then(data=>{
        for(var item of data.data){
          DIC.lineType.push({
            label:item.value,
            value:item.key
          })
        }
      })
      DIC.lineType
    },
    rowChange(val){
      console.log(val);
      this.currentRow=val;
      this.getStationList();
      if(this.modTitle=="修改"){
        this.roadForm.data.lineNum=val.code;	
        this.roadForm.data.finNum=val.finance_code;	
        this.roadForm.data.inName=val.name_in;	
        this.roadForm.data.outName=val.name_out;	
        this.roadForm.data.xzPlace=val.region_id;	
        this.roadForm.data.lateTime=val.late_time;	
        this.roadForm.data.lostTime=val.lost_time;	
        this.roadForm.data.remark=val.remarks;	
      }else{
        this.roadForm.data.finNum="";	
        this.roadForm.data.inName="";	
        this.roadForm.data.outName="";	
        this.roadForm.data.xzPlace="";	
        this.roadForm.data.lateTime="";	
        this.roadForm.data.lostTime="";	
        this.roadForm.data.remark="";	
      }
    }
  },
  computed: {},
  components:{TableData},
  watch: {},
  mounted() {
    console.log("roadManage");
    this.$emit("sendActive",this.activeTag);
    this.tableCreate();
    this.getRoadList();
    this.getROadNamelist();
    this.getLineType();
    this.getDownList();
  }
};
</script>
<style scoped src="../../assets/css/service/roadManage.css">

</style>